@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
}


.web{
    background:url(../img/banggou_bg.png);
    width:100%;
    height:100%;
    font-size:0;
    header{
        background:#e7e7e7;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height:p(71);
        
        .buy{
            width:p(305);
            height:p(50);
            border:p(1) solid #1074ae;
            font-size:p(22);
            color:#1074ae;
            text-align: center;
            line-height: p(50);
            border-radius: p(5);
            img{
                width:p(22);
                height:p(22);
            }
        }
        .share{
            width:p(305);
            height:p(50);
            border:1px solid #1074ae;
            font-size:p(22);
            color:#1074ae;
            text-align: center;
            line-height: p(50);
            border-radius: p(5);
            img{
                width:p(23);
                height:p(23);
            }
        }
    }
    section{
        background:#fff;
        >input{
            display:none;
        }
        #template1:checked~ #template11{
            display:none;
        }
        #template2:checked~ #template22{
            display:none;
        }
        #template3:checked~ #template33{
            display:none;
        }
        .template{
            padding:p(0) p(15);
            width:100%;
            height:p(183);
            
            border-top:p(1) solid #cdccd0;
            border-bottom: p(1) solid #cdccd0;
            display:flex;
            justify-content: space-between;
            .picture{
                display:flex;
                justify-content: center;
                align-items: center;
                
                height:p(185);
                a{
                    display: block;
                    img{
                        width:p(119);
                        height:p(123);
                    }
                }
            }
            .detailed{
                display:flex;
                flex-direction: column;
                padding-top:p(23);
                padding-bottom:p(11);
                .diamonds{
                    height:p(61.33);
                    h3{
                        font-size:p(26);
                        color:#5c5c5c;
                    }
                }
                .price{
                    height:p(61.33);
                    h3{
                        font-size:p(26);
                        font-size:p(26);
                        color:#eb7575;
                    }
                }
                .fabulous{
                    height:p(61.33);
                    display:flex;
                    align-self:flex-end;
                    
                    >div{
                        width:p(130);
                        height:p(43);
                        line-height: p(43);
                        border:p(1) solid #1074ae;
                        font-size:p(20);
                        text-align: center;
                        border-radius: p(6);
                        color:#5c5c5c;
                        img{
                            width:p(27);
                            height:p(24);
                    }
                    }
                }
            }
            .remove{
                display:flex;
                
                justify-content: flex-end;  
                width:p(103);
                height:100%;
                >div{
                    align-self: center;
                    img{
                    width:p(46);
                    height:p(46);
                }
                
                    label{
                            display:block;
                            font-size:p(20);
                            color:#eb7575;
                        
                    }
                }
            }
        }
        .comment{
            width:100%;
            height:p(301);
            border-top:p(1) solid #cdccd0;
            background:#e7e7e7;
            padding:p(10) p(11) p(10) 0;
            position:fixed;
            bottom:0;
            display:flex;
            justify-content: space-between;
            .comment_left{
//              width:p(105);
                height:100%;
                display:flex;
                flex-grow: 1.6;
                justify-content: center;
                >div{
                    h3{
                        font-size:p(24);
                        color:#5c5c5c;
                    }
                    img{
                        width:p(60);
                        height:p(60);
                    }
                }
            }
            .comment_right{
                display:flex;
                flex-direction: column;
                flex-grow: 8.4;
                >div{
                    input{
                    width:100%;
                    height:p(37);
                    font-weight: bold;
                    color:#383838;
                    padding-left:p(10);
                    border:p(1) solid #cdccd0;
                    border-radius: p(6);
                    background:#fff;
                }
                textarea{
                    width:100%;
                    height:p(233);
                    color:#383838;
                    resize: none;
                    padding:p(12);
                    border:p(1) solid #cdccd0;
                    border-radius: p(10);
                    background:#fff;  
                    }
                }
                div:nth-child(1){
                    
                }
                div:nth-child(2){
                    margin-top:p(10);
                    position:relative;
                    a{
                        display:inline-block;
                        position:absolute;
                        bottom:p(25);
                        right:p(12);
                        img{
                            width:p(19);
                            height:p(21);
                        }
                    }
                }
            }
        }
    }
}
